<template>
    <div class="billing-details">
        <div class="line"></div>
        <div class="head">
            <div class="goods">
                <img class="goods-img" v-if="orderData.imgurl" :src="getOtherImageUrl(orderData.imgurl)">
                <div class="content">
                    <span class="title f14">{{ orderData.goods_title }}</span>
                    <div class="config f14">
                        <span>套装:</span>
                        <span>{{ orderData.setmeal_title }}</span>
                    </div>
                    <div class="time f14">
                        <span>租期:</span>
                        <span>{{ orderData.lease_time }}</span>
                    </div>
                    <div class="price f14">
                        <span class="all">总租金:</span>
                        <span class="value">{{ orderData.rent_total }}</span>
                        <span class="count">(分{{ orderData.month_total }}期)</span>
                        <span class="number">x{{ orderData.amount }}</span>
                    </div>
                </div>
            </div>
            <div class="min-line"></div>
            <div class="decorator">
                <AllPriceDetail class-name="active" a-title="应付租⾦" b-title="已付租⾦" c-title="待付⾦额"
                    :a="orderData.rent_total" :b="orderData.paid_rent_total" :c="orderData.rent_total_paid_rent_total">
                </AllPriceDetail>
            </div>
        </div>
        <div class="container">
            <div class="item b f14" v-for="item in orderData.order_lease" :class="{ active: !item.status }"
                :key="item.id">
                <div class="head b flex">
                    <span class="left">{{ item.which_period }}/12</span>
                    <span class="right">{{ item.status ? "已⽀付" : "未⽀付" }}</span>
                </div>
                <div class="detail b">
                    <div class="price flex">
                        <span>扣款金额</span>
                        <span>{{ item.rent }}元</span>
                    </div>
                    <div class="time flex">
                        <span>预计扣款时间</span>
                        <span>{{ item.begin_time }}</span>
                    </div>
                    <div class="time flex" v-if="item.pay_time">
                        <span>实际扣款时间</span>
                        <span>{{ item.pay_time }}</span>
                    </div>
                    <div class="time flex special">
                        <span>租期时间</span>
                        <span>{{ item.lease_time }}</span>
                    </div>
                </div>
                <!-- <div class="foot" v-if="item % 2 != 0">
                    <div class="refund flex b">
                        <span>退款金额</span>
                        <span>1.20元</span>
                    </div>
                    <div class="refund flex">
                        <span>退款时间</span>
                        <span>2022-11-03 15:57</span>
                    </div>
                </div> -->
            </div>
        </div>
        <loading v-show="!orderData.imgurl"></loading>
    </div>
</template>
<script>
import AllPriceDetail from "@/components/Goods/AllPriceDetail.vue"
export default {
    name: "BillingDetails",
    components: {
        AllPriceDetail
    },
    data() {
        return {
            orderData: {},
        }
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            const { order_id } = this.$route.query;
            this.$sendGet("Order/getOrderLease", { order_id })
                .then(res => {
                    if (res.data.status === 200) {
                        const { data } = res.data;
                        this.orderData = data;
                    }
                })
        }
    }
}
</script>
<style lang="scss" scoped>
.billing-details {
    min-height: 100vh;
    background-color: #f7f7f7;

    .line {
        width: 100vw;
        height: 20px;
        background-color: #f7f7f7;
    }

    .head {

        .goods {
            display: flex;
            border-top: 1px solid #eeeeee;
            position: relative;
            background-color: white;

            .goods-img {
                width: 140px;
                padding: 10px;
                object-fit: contain;
            }

            .content {
                padding: 10px;
                padding-left: 0;
                display: flex;
                flex-direction: column;

                .title {
                    margin-bottom: 8px;
                }

                .config {
                    margin-bottom: 8px;
                    color: #c3c3c3;
                }

                .time {
                    margin-bottom: 8px;
                    color: #c3c3c3;
                }

                .price {
                    display: flex;
                    align-items: center;
                }
            }
        }

        .min-line {
            width: 355px;
            margin-left: 10px;
            height: 1px;
            background-color: #cfcfcf;
        }

        .decorator {
            background-color: white;
            padding: 15px 0;
        }
    }

    .container {
        padding: 15px;
        background-color: #f7f7f7;

        .item {
            padding: 10px;
            border-radius: 5px;
            color: #b9b9b9;
            background-color: #efefef;

            &:last-of-type {
                margin-bottom: 0;
            }

            .head {
                padding-bottom: 10px;
                border-bottom: 1px solid #e8e8e8;
            }

            .detail {
                border-bottom: 1px solid #e8e8e8;

                div {
                    padding-bottom: 10px;
                }
            }

            &.active {
                color: black;
                background-color: white;

                .detail {
                    border-bottom: 0;

                    div {
                        span {
                            &:nth-of-type(2) {
                                color: #bbbbbb;
                            }
                        }
                    }

                    .special {
                        padding-bottom: 0;
                    }
                }
            }


        }
    }
}
</style>